<template>
  <div id="NewsNode">
    <img class="img-div" :src="datas.src"/>
    <div class="content">
      <span class="title" :title="datas.title">{{datas.title}}</span>
      <p class="new-content">{{datas.content}}</p>
      <span class="date">时间：【{{datas.date}}】</span>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'NewsNode',
    props: {
      datas: {
        type: Object
      }
    }
  }
</script>

<style lang="scss" scoped>
 @import 'publicLib/scss/defualtScss.scss';

 @mixin oneLineStyle{
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
 }

 #NewsNode{
   width: 100%;
   height: 10rem;

   img{
     width: 10rem;
     height: 10rem;
   }

   .img-div{
     float: left;
   }

   .content{
     width: 70%;
     float: right;
     color: $data-detail-font-color;
     margin-right: 3rem;

     &:hover{
       p,span{
         color: $default-layout-color;
       }
     }

     .title{
       @include oneLineStyle;
     }

     span{
       display: block;
       height: 2rem;
       clear: both;
       text-align: left;
     }

     .new-content{
       font-size: $font-size-normol;
       height: 4rem;
       clear: both;
       text-align: left;
       @include oneLineStyle;
     }

     .date{
       font-size: $font-size-default;
       margin-top: 2rem;
     }
   }

 }
</style>
